
<!-- 
 -->

<script setup lang="ts">
</script>


<template>
  <div class="decoration-type3">
    <!-- 外框 -->
    <div class="decoration-type3-border">
      <div class="border-inner"></div>
    </div>
    <!-- ↖装饰 -->
    <div class="decoration-type3-comps1"></div>
    <!-- ↗装饰 -->
    <div class="decoration-type3-comps2"></div>
    <!-- ↘装饰 -->
    <div class="decoration-type3-comps3"></div>
    <!-- ↙装饰 -->
    <div class="decoration-type3-comps4"></div>
    <!-- ↙嵌入装饰 -->
    <div class="decoration-type3-comps5"></div>
    <!-- ↗嵌入装饰 -->
    <div class="decoration-type3-comps6"></div>

    <!-- 内容区域 -->
    <div class="decoration-type3-slot-area">
      <slot name="chart"></slot>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
@import "./common.scss";
@mixin color-transition($keyframes, $duration, $delay) {
  animation: $keyframes $duration $delay ease-in-out infinite;
}
@mixin decoration-common {
  position: absolute;
  width: 100%;
  height: 100%;
}
$pad: 2%;
$headH: 2.5rem;
.decoration-type3 {
  width: 100%;
  height: 100%;
  position: relative;
  @include flex-row-center-center;
  .decoration-type3-border {
    @include decoration-common;
    clip-path: polygon(
      36% 3%,
      36% 2.5%,
      1.5% 2.5%,
      // ↖顶点
        1.5% 58%,
      2.5% 60%,
      2.5% 70%,
      1.5% 72%,
      1.5% 98%,
      // ↙顶点
        98.5% 98%,
      // ↘顶点
        98.5% 35%,
      97.5% 33%,
      97.5% 23%,
      98.5% 21%,
      98.5% 2.5%,
      // ↗顶点
        64% 2.5%,
      64% 3%
    );
    .border-inner {
      width: 100%;
      height: 100%;
      background: transparent;
      filter: blur(4px);
      box-shadow: inset 0px 0px 50px rgb(255, 255, 255);
    }
  }

  .decoration-type3-comps1 {
    @include decoration-common;
    background: rgba(255, 255, 255, 0.658);
    clip-path: polygon(8% 1.5%, 10% 2.5%, 1.5% 2.5%, 1.5% 10%, 1% 8%, 1% 1.5%);
    @include color-transition(colorWhite, 4s, 0s);
  }

  .decoration-type3-comps2 {
    @include decoration-common;
    background: rgba(255, 255, 255, 0.658);
    clip-path: polygon(
      92% 1.5%,
      90% 2.5%,
      98.5% 2.5%,
      98.5% 10%,
      99% 8%,
      99% 1.5%
    );
    @include color-transition(colorWhite, 4s, 1s);
  }

  .decoration-type3-comps3 {
    @include decoration-common;
    background: rgba(255, 255, 255, 0.658);
    clip-path: polygon(
      92% 99%,
      90% 98%,
      98.5% 98%,
      98.5% 90%,
      99% 92%,
      99% 99%
    );
    @include color-transition(colorWhite, 4s, 2s);
  }

  .decoration-type3-comps4 {
    @include decoration-common;
    background: rgba(255, 255, 255, 0.658);
    clip-path: polygon(8% 99%, 10% 98%, 1.5% 98%, 1.5% 90%, 1% 92%, 1% 99%);
    @include color-transition(colorWhite, 4s, 3s);
  }
  .decoration-type3-comps5 {
    @include decoration-common;
    clip-path: polygon(1.45% 58.5%, 2.3% 60.25%, 2.3% 69.75%, 1.45% 71.5%);
    @include color-transition(colorType1, 2s, 0s);
  }
  .decoration-type3-comps6 {
    @include decoration-common;
    clip-path: polygon(98.5% 21.75%, 97.75% 23.4%, 97.75% 32.6%, 98.5% 34.2%);
    @include color-transition(colorType1, 2s, 1s);
  }

  .decoration-type3-slot-area {
    position: absolute;
    width: calc(100% - 8%);
    height: calc(100% - 10%);
    left: 4%;
    top: 5%;
  }
}
</style>
